<!--  -->
<template>
  <div class="mytodos">
    <div class="header">
      <h1>todos</h1>
    </div>
    <div class="content">
      <div class="content-top">
        <div :class="['content-top-left',{AllCheckc:AllChecked}]" @click="AllCheck">
          >
        </div>
        <div class="content-top-right">
          <input type="text" 
          @keyup.enter="savetodo"
          v-model="inputv"
          v-focus
          />
        </div>
      </div>
      <div class="content-mid">
        <div class="content-mid-list">
          <div
            class="mid-list-item"
            v-for="(item, index) in filtertodos"
            :key="item.id"
          >
            <div class="list-item-left">
              <input type="checkbox" name="" id="" v-model="item.status" />
            </div>
            <div :class="['list-item-mid',{complate:item.status}]">
              <span @click="edittodo(index)" :class="['title',{hidden:edit===index}]">{{ item.text }}</span>
              <input @blur="saveedittodo" :class="{hidden:edit!==index}" type="text" v-model="item.text">
            </div>
            <div class="list-item-right" @click="dele(index)">X</div>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="content-buttom-left">{{remain}}项剩下</div>
        <div class="content-buttom-mid">
          <div @click="itemclick('all')" :class="['mid-left',{active:activetab==='all'}]">全部</div>
          <div @click="itemclick('active')" :class="['mid-left',{active:activetab==='active'}]">激活</div>
          <div @click="itemclick('completed')" :class="['mid-left',{active:activetab==='completed'}]">完成</div>
        </div>
        <div @click="clear" class="content-bottom-right">
          清除完成
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import{mapGetters}from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // activetab:"all",
      edit:-1,//没有编辑
      inputv:"",
      //  [
        // {
        //   text: "吃饭",
        //   status: true,
        //   id: "1",
        // },
        // {
        //   text: "睡觉",
        //   status: false,
        //   id: "2",
        // },
      // ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(['filtertodos','remain','AllChecked','activetab']),
    //剩下几项
    // remain:function(){
    //   let remaintodos = this.todos.filter(v=>{
    //     if (!v.status) {
    //       return true
    //     }
    //   })
    //   return remaintodos.length;
    // },
    //过滤todos
    // filtertodos:function(){
    // if (this.activetab==='all') {
    //     return this.todos
    //   }else if (this.activetab==="active") {
    //     return this.todos.filter(v=>{
    //       return !v.status
    //     }) 
    //   }else if (this.activetab==="completed") {
    //     return this.todos.filter(v=>{
    //       return v.status
    //     }) 
    //   }
    // },
      // AllChecked:function(){
      // let Checked = true;
      // this.todos.map((v)=>{
      // if (!v.status) Checked = false
      //   })
      
      //    return Checked
      // },

  },
  //监控data中的数据变化
  watch: {
    // todos:{
    //   handler:function(newtodos){
    //     localStorage.setItem("todos",JSON.stringify(newtodos))
    //   },
    //   // deep:true
    // }
  },
  //方法集合
  methods: {
    //清除完成
    clear:function(){
      this.$store.commit("clear")
      // let activetodo = this.todos.filter(v=>{
      //   return !v.status
      // })
      // this.todos = activetodo 
    },
    //状态切换
    itemclick:function(activetab){
      this.$store.commit({
        type:"changeactive",
        payload:{
          activetab
        }
      })
      // this.activetab=activetab
    },
    //编辑保存
    saveedittodo:function(){
      this.edit = -1
    },
    //编辑
    edittodo:function(index){
      this.edit = index;
    },
    //删除
    dele:function(index){
            this.$store.commit({
        type:"dele",
        payload:{
          index:index
        }
      })
      // this.todos.splice(index,1)
    },

    //全选
    AllCheck:function(){
      this.$store.commit("AllCheck")
      // this.AllChecked = true;
      // let newtodos = JSON.parse(JSON.stringify(this.todos));
      // newtodos.map(v=>{
      //   v.status = true;
      // })
      // this.todos = newtodos
    },
    //存
    savetodo:function(){
      if (!this.inputv) {
        // alert("输入不能为空");
        this.$message({
          message:"输入不能为空!",
          type:"warning"
        })
        return false
      }
      this.$store.commit({
        type:"addtodos",
        payload:{
                  text: this.inputv,
        status: false,
        id: Date.now(),
        }
      })
      //       this.todos.push({
      //   text: this.inputv,
      //   status: false,
      //   id: Date.now(),
      // });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  directives:{
    "focus":{
      inserted:function(el){
        el.focus();
      }
    }
  }
};
</script>
<style lang='less' scoped>
.hidden{
  display: none;
}
.show{
  display: block;
}
.mytodos {
  width: 50vw;
  margin: 0 auto;
  .header {
    h1 {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }

  .content {
    .content-top {
      margin-top: 5px;
      padding: 5px;
      display: flex;
      height: 30px;
      border-bottom: 1px solid #ddd;
      .content-top-left {
        height: 30px;
        flex: 1;
        text-align: center;

        span {
          // color: red;
        }
      }
      .AllCheckc{
        color: red;
        transform: rotate(90deg);

      }
      .content-top-right {
        flex: 8;
        height: 30px;
        input {
          height: 100%;
          width: 100%;
        }
      }
    }
    .content-mid {
      margin-top: 20px;
      .content-mid-list {
        .mid-list-item {
          height: 50px;
          display: flex;
          align-items: center;
          .list-item-left {
            flex: 1;
            display: flex;
            justify-content: center;
            input {
            }
          }

          .list-item-mid {
            flex: 8;
            .title {
            }
          }
          .complate{
            color: #ddd;
            text-decoration: line-through;
          }
          .list-item-right {
            visibility: hidden;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
                .mid-list-item:hover {
          .list-item-right {
            visibility: visible;
            cursor: pointer;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
      }
    }
    .content-bottom {
    padding: 5px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  .content-buttom-left {

  }

  .content-buttom-mid {
    display: flex;
    .active{
      border: 1px solid pink;
    }
    .mid-left {
      margin-right: 5px;
    }
  }

  .content-bottom-right {

  }
}
  }
}
</style>